<template>
	<view class="content">
		<image src="../../static/images/home/home-top-bg.png" mode="widthFix" style="width: 100%;">
		</image>
			<view class="notice-block">
				<view class="notice-item" v-for="(item,index) in noticeList" :key="item.id" @click="navigate('/pages/notice/notice-detail?id='+item.id)"
					style="background: #fff url('../../static/images/home/notice-bg.png') no-repeat right;background-size: 30% 100%;">
					<view class="notice-title">{{item.title}}</view>
					<view class="time">发布日期：{{item.time}}</view>
				</view>
			</view>	
	</view>
</template>
+
<script>
	export default {
		data() {
			return {
				noticeList: [{
						id: 1,
						title: '2020年酒泉市市直事业单位公开招聘工作人员公告',
						time: '2020-11-28 14:31:05'
					},
					{
						id: 2,
						title: '2020年市直事业单位公开招聘工作人员笔试成绩公布及参加资格审核的公告',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 3,
						title: '肃州区公开考试招聘专职社区工作者报名',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 4,
						title: '2020年肃北县事业单位公开招聘工作人员考试',
						time: '2020-08-14 17:30:59'
					},
					{
						id: 5,
						title: '2020年玉门市事业单位公开招聘工作人员考试',
						time: '2020-08-10 15:30:59'
					},
					{
						id: 6,
						title: '金塔县公开招聘专职社区工作者考试报名',
						time: '2020-09-11 15:30:59'
					},
					{
						id: 7,
						title: '2020年酒泉市瓜州县事业单位公开招聘工作人员考试',
						time: '2020-10-21 15:33:59'
					},
					{
						id: 8,
						title: '2020年敦煌市事业单位公开招聘工作人员考试',
						time: '2020-09-16 15:33:59'
					},
					{
						id: 9,
						title: '2020年阿克塞县事业单位公开招聘工作人员考试',
						time: '2020-08-05 15:33:59'
					},
				],
				noticeList2:[
					{
						id: 2,
						title: '2020年肃州区事业单位公开招聘工作人员考试',
						time: '2020-10-09 14:30:59'
					},
					{
						id: 3,
						title: '肃州区公开考试招聘专职社区工作者报名',
						time: '2020-10-09 14:30:59'
					},
				],
				noticeList3:[
					{
						id: 5,
						title: '2020年玉门市事业单位公开招聘工作人员考试',
						time: '2020-08-10 15:30:59'
					},
				],
				noticeList4:[
					{
						id: 7,
						title: '2020年酒泉市瓜州县事业单位公开招聘工作人员考试',
						time: '2020-10-21 15:33:59'
					},
				],
				noticeList5:[
					{
						id: 8,
						title: '2020年敦煌市事业单位公开招聘工作人员考试',
						time: '2020-09-16 15:33:59'
					},
				],
				noticeList6:[
					{
						id: 4,
						title: '2020年肃北县事业单位公开招聘工作人员考试',
						time: '2020-08-14 17:30:59'
					},
				],
				noticeList7:[
					{
						id: 9,
						title: '2020年阿克塞县事业单位公开招聘工作人员考试',
						time: '2020-08-05 15:33:59'
					},
				],
				noticeList8:[
					{
						id: 6,
						title: '金塔县公开招聘专职社区工作者考试报名',
						time: '2020-09-11 15:30:59'
					},
				],
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;
		padding-bottom: 30rpx;

		.notice-block {
			display: flex;
			flex-direction: column;
			margin-top: -250rpx;
			padding: 20rpx;

			.title-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.line {
					width: 8rpx;
					height: 34rpx;
					background-color: #2287FC;
					border-radius: 20rpx;
					margin-right: 10rpx;
				}

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.notice-item {
				margin-top: 30rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 18rpx 0 #dddddd;

				.notice-title {
					font-size: 30rpx;
				}

				.time {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>